<template>
  <div class="middle" @click="cancelFn" v-adaptive="{ bottomOffset: 0 }">
    <template v-for="item in dragStore.renderData" :key="item.id">
      <div v-show="item.leaveElement == 'back'" class="leaveElement"></div>
      <div draggable :class="item.click ? 'item click' : 'item'" @click="(e) => clickFn({ e, current: item })" @dragleave="(e) => dragLeave(e, item)" @dragover="(e) => dragEnter(e, item)">
        <Box :item="item" :style="dragStore.dragStyle" />
          <div v-if="item.type == 'container' && item.key == 'diologForm'">
            <div>弹窗新增容器</div>
            <div v-for="(ite, index) in item.childrens" :key="ite.id">
              <div @click="(e) => clickFn({ e, current: ite, parent: item, currentIndex: index })" :class="ite.click ? 'click childItem' : 'childItem'">
                <Box :item="ite" />
                <component v-on="ite.methods" :id="ite.id" :is="componentFn(ite)" v-bind="ite.props"> </component>
              </div>
            </div>
          </div>
          <component v-on="item.methods" :id="item.id" :ref="(el: any) => (dragStore.refList[item.highEdit.ref] = el)" :is="componentFn(item)" v-bind="item.key == 'diologForm' ? utilCombineObj(item.props, item.otherProps) : item.props">
            <template v-if="item.key == 'pageForm' || item.key == 'diologForm' || item.key == 'searchForm'" #otherFormItem="{ form }">
              <template v-for="(ite, index) in item.childrens" :key="ite.id">
                <component v-if="item.key == 'diologForm'" v-on="ite.methods" :id="ite.id" :is="componentFn(ite)" :modelValue="form[ite.props.itemKey]" v-bind="ite.props"> </component>
                <div v-else @click="(e) => clickFn({ e, current: ite, parent: item, currentIndex: index })" :class="ite.click ? 'click childItem' : 'childItem'">
                  <Box :item="ite" />
                  <component v-on="ite.methods" :id="ite.id" @update:modelValue="(newValue:any) => form[ite.props.itemKey] = newValue" :is="componentFn(ite)" :modelValue="form[ite.props.itemKey]" v-bind="ite.props"> </component>
                </div>
              </template>
            </template>
            <template v-if="item.key == 'cTable'" #otherColumned>
              <template v-for="(ite, index) in item.childrens" :key="ite.id">
                <component :id="ite.id" :is="componentFn(ite)" v-bind="{ column: { ...ite.props.column, hasHeader: true } }">
                  <template #header
                    >{{ ite.props.column.label }}
                    <img class="cTableImg" @click="(e) => deleteFn(e, ite)" src="./img/delete.png" alt="" />
                    <img @click="(e) => clickFn({ e, current: ite, parent: item, currentIndex: index })" class="cTableImg" src="./img/edit.png" alt="" />
                  </template>
                </component>
              </template>
            </template>
          </component>
        </div>
      <div class="leaveElement" v-show="item.leaveElement == 'next'"></div>
    </template>
  </div>
</template>
<script setup lang="ts">
import {deleteFn} from "./box/index"
import { utilCombineObj } from "@/assets/utils";
import { cancelFn } from "@/views/coderCreate/index";
import Box from "./box/index.vue";
const dragStore = useDrag();
function componentFn(item: IStdORender) {
  let data= dragStore.registerConfig.componentMap[item.key] as IStdOListDrag
  return data.middleOpt.render;
}
function dragEnter(e: any, item: IStdOContainerRender | IStdOFormItemRender) {
  if (!dragStore.enter) {
    dragStore.enter = true;
    if (dragStore.leaveItem) {
      dragStore.leaveItem.leaveElement = false;
      dragStore.leaveItem = null;
    }
    item.click = true;
    dragStore.enterItem = item;
  }
}
function dragLeave(e: DragEvent, item: IStdOContainerRender | IStdOFormItemRender) {
  if (dragStore.enter) {
    dragStore.enter = false;
    // @ts-ignore
    item.leaveElement = e.y > e.target.offsetTop + e.target.offsetHeight ? "next" : "back";
    dragStore.leaveItem = item;
    if (dragStore.enterItem) dragStore.enterItem.click = false;
    dragStore.enterItem = null;
  }
}
function clickFn({ e, current, parent, currentIndex }: { e: MouseEvent; current: IStdORender; parent?: IStdOContainerRender; currentIndex?: number }) {
  e.stopPropagation();
  if (parent && currentIndex) dragStore.clickParent = { parent, iteindex: currentIndex };
  dragStore.clickItem = current;
  dragStore.clickItemSettings =null
  let data:any={}
  dragStore.registerConfig.componentMap?.[dragStore.clickItem.key as componetType].rightOpt.settingRender?.map((item: IStdOSetRightItem) => {
    if (!data[item.editType]) data[item.editType] = [];
    data[item.editType].push(item);
  });
    dragStore.clickItemSettings = data;
  cancelFn();
  current.click = true;
}
</script>
<style lang="scss" scoped>
.middle {
  flex: 1;
  overflow-y: auto;
  margin: 20px 20px 0;
  padding: 10px;
  .leaveElement {
    width: 100%;
    background-color: #409eff;
    height: 5px;
  }
  .cTableImg {
    height: 15px;
    width: 15px;
    margin-left: 5px;
  }
  .click {
    border: 1px solid #409eff;
    margin-left: -1px;
    margin-top: -1px;
    margin-bottom: -1px;
  }
  .item {
    padding: 5px;
    border-radius: 4px 4px 0px;
    position: relative;
  }
  .childItem {
    padding: 5px;
    border-radius: 4px;
    position: relative;
    margin-right: 5px;
    margin-bottom: 5px;
  }
}
</style>
